<template>
  <div class="maifest">
    <div class="box">
      <div class="top">
        <van-icon @click="$router.go(-1)" color="#4f565c" name="arrow-left" />
        <span>必抢清单</span>
      </div>
    </div>
    <div class="bbbox">
      <div class="bar">
        <div class="barbox" v-for="(item,index) in arr" :key="index" @click="change(index)">
          <div :class="{ active: num == index }">
            <img :src="item.pic" alt="">
            <h6>{{item.text}}</h6>
          </div>
        </div>
      </div>
    </div>
    <component :is="bar"></component>
  </div>
</template>

<script>
import JingXuanVue from '@/components/gifzj/JingXuan.vue';
import JiaDVue from '@/components/gifzj/JiaD.vue';
export default {
  data() {
    return {
      bar:'',
      num: 0,
      arr: [
        { pic: 'https://image.suning.cn/uimg/MZMS/show/155117928298268957.png?from=mobile', text: '精选' },
        { pic:'https://image.suning.cn/uimg/MZMS/show/155117929720977273.png?from=mobile',text:'家电'},
        { pic: 'https://image.suning.cn/uimg/MZMS/show/151384323374513944.png?from=mobile', text: '酷机' },
        { pic: 'https://image.suning.cn/uimg/MZMS/show/151375579188137688.png?from=mobile', text: '超市' },
        { pic: 'https://image.suning.cn/uimg/MZMS/show/151375580058931338.png?from=mobile', text: '穿搭' },
        { pic: 'https://image.suning.cn/uimg/MZMS/show/151375578418753424.png?from=mobile', text: '育儿' },
        { pic: 'https://image.suning.cn/uimg/MZMS/show/155117928912031039.png?from=mobile', text: '办公' },
        { pic: 'https://image.suning.cn/uimg/MZMS/show/151669485755224183.png?from=mobile', text: '运动' },
        { pic: 'https://image.suning.cn/uimg/MZMS/show/151477707934186366.png?from=mobile', text: '出行' }
      ]
    }
  },
  methods: {
    change(x) {
      if (x % 2 == 0) {
        this.bar = JingXuanVue
      } else {
        this.bar = JiaDVue
      }
      this.num = x;
    }
  },
  components: {
    JingXuanVue,
    JiaDVue
  },
  mounted() {
    this.bar = JingXuanVue;
  }
}
</script>
 
<style lang="scss" scoped>
.maifest{
  .box{
    width: 100%;
    background-color: #ffffff;
    .top {
        font-size: 0.15rem;
        width: 95%;
        height: 0.46rem;
        padding: 0 2.5%;
        line-height: 0.46rem;
    
        span {
          color: #ff342d;
          font-weight: bold;
          margin-left: 1.28rem;
        }
      }
  }
  .bbbox{
    .bar {
        width: 100%;
        height: 0.58rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        font-size: 0.15rem;
        color: #fdf2f5;  
        flex-wrap: wrap;  
        overflow-x: auto;
        .barbox {
          width: 0.75rem;
          height: 100%;
          background-color: #ff342d;
          .active {
            height: 100%;
            background-color: #cd0031;
          }
    
          img {
            margin-top: 0.09rem;
            width: 0.25rem;
            height: 0.25rem;
          }
        }
    
      }
  }
  
}
</style>